"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/6
 */
import * as React from 'react'

const {View, FlatList, TouchableOpacity,DeviceEventEmitter} = require('react-native');
const {connect} = require('react-redux');

const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");

import {guideStyles} from "../../assets/styles/guide";
import {commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyText from "../../component/MyText";

import {activeTypes} from "../../assets/data";
import {activeFilterStyles} from "../../assets/styles/community";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import {ActiveFilterPage, ActivePage} from "../../interface/router";
import constant from "../../utils/constant";


const ActiveTypeItem = (props: { item: activeTypeItem, onPress?: Function, selected: boolean }) => {

    return (
        <TouchableOpacity style={[activeFilterStyles.item]}
                          onPress={props.onPress ? props.onPress.bind(null, props.item) : null} activeOpacity={0.9}>
            <View style={[commonStyles.flexRow, {alignItems: 'center'}]}>
                <View style={[activeFilterStyles.itemIconContainer, commonStyles.centerVH]}>
                    {props.selected ? <MyIcon name={'icon-gou'} color='#DAC228'/> : null}
                </View>
                <MyText
                    style={[activeFilterStyles.listItemText, props.selected ? activeFilterStyles.active : null]}>{props.item.typeName}</MyText>
            </View>
            <View style={{paddingLeft: 40}}>
                <Line/>
            </View>
        </TouchableOpacity>
    )
};


interface ActiveFilterPageState {
    selectedArray?: Array<number | string>
}

class Page extends React.Component<ActiveFilterPage, ActiveFilterPageState> {

    static defaultProps = {
        onApply: null
    };


    state = {
        selectedArray: []
    };


    componentDidMount(): void {
        this.props.dispatch({type: 'active/fetchTypeList', payload: {pi: 1, ps: 10}})
    }

    onReachedEnd = () => {
        if (this.props.active.typeList && !this.props.active.typeList.last) {
            this.props.dispatch({
                type: 'active/fetchTypeList',
                payload: {
                    pi: this.props.active.typeList.number + 2,
                    ps: 10,
                    loadmore: true,
                }
            })
        }
    };
    onItemPress = (item: activeTypeItem) => {
        let selectedArray = this.state.selectedArray;
        if (!selectedArray) {
            selectedArray = [];
        }
        const index = selectedArray.indexOf(item.id);
        if (index === -1) {
            selectedArray.push(item.id);
        } else {
            selectedArray.splice(index, 1);
        }
        this.setState({selectedArray})
    };

    applyFilter = () => {

        this.props.dispatch({
            type:'active/applyActiveFilter',
            payload:{selectedActiveTypes:this.state.selectedArray}
        });
        // DeviceEventEmitter.emit(constant.noticeKeyOfEnterActiveList);

        // if (this.props.onApply) {
        //     this.props.onApply(this.state.selectedArray)
        // }
    };

    renderItem = ({item}) => {
        return <ActiveTypeItem item={item}
                               selected={this.state.selectedArray.indexOf(item.id) !== -1}
                               onPress={this.onItemPress.bind(this, item)}
        />
    };

    renderListHeaderComponent = () => {
        return (
            <View style={[commonStyles.listItem, activeFilterStyles.listItem, commonStyles.flexColumn]}>
                <View style={[commonStyles.flex1, {justifyContent: 'center'}]}>
                    <MyText color={'#333'} fontSize={16}>按兴趣筛选</MyText>
                </View>
                <Line/>
            </View>
        )
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton>取消</NavBackButton>}
                               title={{title: '活动筛选器', tintColor: '#fff'}}
                />
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.active.typeList ? this.props.active.typeList.content : []}
                              style={{backgroundColor: '#fff'}}
                              extraData={this.state}
                              ListHeaderComponent={this.renderListHeaderComponent}
                              keyExtractor={(item) => item.id}
                              onEndReachedThreshold={1}
                              onEndReached={this.onReachedEnd}
                              renderItem={this.renderItem}/>
                </View>
                <TouchableOpacity activeOpacity={0.9} onPress={this.applyFilter}>
                    <View style={guideStyles.loginBth}>
                        <MyText style={guideStyles.loginText}>应用筛选器</MyText>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}


export default connect(
    ({auth, active}) => ({auth, active})
)(Page);